import React from 'react';
import SvgIcon from '../SvgIcon';

type Props = {
  num?: number;
  size?: number;
  gap?: number;
  color?: string;
};

function Stars({ num = 1, size, color = '#FEC84B', gap = 5 }: Props) {
  const list = Array.from({ length: num }, (_, i) => i + 1);
  return (
    <div className="stars" style={{ display: 'inline-flex', gap, color }}>
      {list.map((_, i) => (
        <SvgIcon name="star" key={i} size={size || 20} />
      ))}
    </div>
  );
}

export default Stars;
